<template>
  <div style="margin-bottom: 20px">

    <table-view :data="tableData">
      <el-table-column
              min-width="150"
              show-overflow-tooltip
        prop="distributeInfo.distributeName"
        label="配送商名称"
        align="center"
        header-align="center"
      />
      <el-table-column
              min-width="100"
              show-overflow-tooltip
        prop="distributeInfo.distributeNo"
        label="配送商编号"
        align="center"
        header-align="center"
      />
      <el-table-column
              width="140"
              prop="returnAmount"
              label="回款营销额(元)"
              align="right"
              header-align="center"
      >
        <template #default="{row}">
          {{ isInteger(row.returnAmount) }}
        </template>
      </el-table-column>
      <el-table-column
              width="140"
        label="总配送费(元)"
        align="center"
        header-align="center"
      >
        <template #default="scope">
          {{ isInteger(scope.row.terminalAmount - scope.row.returnAmount) }}
        </template>
      </el-table-column>

      <el-table-column
              width="160"
              prop="firstTerminalAmount"
              label="第1终端营销额(元)"
              align="right"
              header-align="center"
      >
        <template #default="{row}">
          {{ isInteger(row.firstTerminalAmount) }}
        </template>
      </el-table-column>
      <el-table-column
              width="160"
              prop="secondTerminalAmount"
              label="第2终端营销额(元)"
              align="right"
              header-align="center"
      >
        <template #default="{row}">
          {{ isInteger(row.secondTerminalAmount) }}
        </template>
      </el-table-column>
      <el-table-column
              width="160"
              prop="thirdTerminalAmount"
              label="第3终端营销额(元)"
              align="right"
              header-align="center"
      >
        <template #default="{row}">
          {{ isInteger(row.thirdTerminalAmount) }}
        </template>
      </el-table-column>
      <el-table-column
              width="160"
              prop="agentTypeAgentAmount"
              label="代理商营销额(元)"
              align="right"
              header-align="center"
      >
        <template #default="{row}">
          {{ isInteger(row.agentTypeAgentAmount) }}
        </template>
      </el-table-column>
      <el-table-column
              width="160"
              prop="agentTypeAgentPersonAmount"
              label="兼职营销额(元)"
              align="right"
              header-align="center"
      >
        <template #default="{row}">
          {{ isInteger(row.agentTypeAgentPersonAmount) }}
        </template>
      </el-table-column>
      <el-table-column
              width="160"
              prop="agentTypeDirectAmount"
              label="终端直销营销额(元)"
              align="right"
              header-align="center"
      >
        <template #default="{row}">
          {{ isInteger(row.agentTypeDirectAmount) }}
        </template>
      </el-table-column>

    </table-view>

  </div>
</template>

<script>
import {defineComponent} from 'vue'

export default defineComponent({
  name: 'FourClientView',
  props: {
    tableData: {
      type: Array,
      default: [],
    },
  },
  setup() {
    return {}
  },
})
</script>

<style scoped>
</style>
